<!--  -->
<template>
<div class='free-page'>
  <c-title :hide="false" text="商城免单"></c-title>
  <div class="previous" @click.stop="lotteryTo">抽奖记录</div>
  <div class="free-time flex-a-c flex-j-c" v-if="status == 0 && !localStatus">
    <div>距离开奖：</div>
    <van-count-down :time="presentTime">
      <template #default="timeData">
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>
  </div>
  <div class="free-time flex-a-c flex-j-c" v-if="status == 0 && localStatus" >抽奖中...</div>
  <div v-if="status" class="mb-30"></div>
  <div class="lottery-main" >
    <img :src="freeImg" v-if="freeImg" class="lottery-bg">
    <div class="lottery-swiper flex-a-c" >
      <!--v-if="lotteryList.length>1"-->
      <swiper style="width: 100%;" :options="swiperOption" class="my-swiper" ref="mySwiper" v-if="lotteryList.length>0">
          <swiper-slide v-for="(item, index) in lotteryList" :key="index" class="swiper-itemH">
            <div class="flex phone-main">
              <div class="phone-item flex-a-c flex-j-sb"  v-for="(freeItem,freeIndex) in item" :key="freeIndex">
                <p>{{freeItem}}</p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
    </div>
  </div>
  <div class="winning-order" v-show="status && winningArr.length > 0">
    <div class="winning-box" ref="winningRef"  style="overflow: hidden;">
      <div class="winning-phone">
        <div class="flex phone-main">
          <div class="phone-item flex-a-c flex-j-sb" v-for="(item,index) in winningArr" :key="index">
            <p>{{item}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="winning-head ">
      <div class="flex">今日中奖订单</div>
    </div>
  </div>
</div>
</template>

<script>
import freeCharge_controller from "./freeCharge_controller";
export default freeCharge_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */


.free-time  ::v-deep .van-count-down {
  font-size: 1rem;
  line-height: 1rem;
  color: #074310;
}
.visibility {
  visibility:hidden;
}
.mb-30 {
  height: 1.875rem;
  clear: both;
}
.free-page {
  //设计稿2.9375rempadding:4.1875rem 2.5rem 0 2.3125rem;
  padding:1.8125rem 2.5rem 0 2.3125rem;
  position: relative;
  background-color: #fff;
  height: 100%;
  min-height: 100vh;
  position: relative;
  .previous {
    font-size: 0.8125rem;
    color: #FFFFFF;
    line-height: 0.75rem;
    background-color: #017437;
    border-radius: 0.75rem 0rem 0rem 0.75rem;
    position: absolute;
    right:0;
    top:4rem;
    z-index: 9;
    padding:0.375rem 0.5625rem 0.375rem 0.6875rem;
  }
  .free-time {
    margin:0 0 0.8125rem;
    font-size: 1rem;
    line-height: 1rem;
    color: #074310;
  }
  .winning-order {
    background: #123428;
    border-radius: 1.125rem;
    padding:0.5rem;
    background-color: #123428;
    position: relative;
    .winning-box {
      background: #F5F5F5;
      border-radius: 0.9375rem;
      height: 7.0625rem;
      padding:0rem 2.3125rem 0rem 2.3125rem;
      
      .winning-phone {
        padding:1.375rem 0 0.875rem 0;
        .phone-main {
          flex-wrap: wrap;
          .phone-item {
            padding:0 0 0.75rem 0;
            flex:0 0 50%;
            p {
              font-size: 0.8125rem;
              line-height: 0.6875rem;
              color: #123428;
            }
            &:nth-child(2n) {
              justify-content: center;
            }
          }
        }
        
      }
      
    }
    .winning-head {
      background: linear-gradient(0deg, #017437 0%);
      border-radius: 1.1875rem;
      border: 0.0625rem solid #F5F5F5;
      font-weight: bold;
      font-size: 1.125rem;
      line-height: 1.125rem;
      color: #FEFEFE;
      padding:0.625rem 1.4375rem;
      position: absolute;
      top:0%;
      left:50%;
      display: inline-block;
      transform: translate(-50%,-50%);
      white-space: nowrap;
    }
  }
  .lottery-main {
    margin:0 0 2.625rem 0;
    width:100%;
    position: relative;
      // margin:0 2.5rem 2.625rem 2.3125rem;
      .lottery-bg {
        width: 100%;
        height: auto;
        display: block;
        position: absolute;
        top:0;
        left:0;
        z-index: 0;
      }
    .my-swiper {
      background-color: #F5F5F5;
      border-radius: 1.75rem;
      height: 13.6875rem;
    }
    .swiper-itemH{
      padding:1.3125rem 1.1875rem;
    }
    .lottery-swiper {
      height: 22.375rem;
      border-radius: 1.125rem;
      padding:6.5625rem 1.6875rem 1.6875rem 1.5rem;
      background-repeat: no-repeat;
      background-size: cover;
      // background-color: #123428;
      position: relative;
      .phone-main {
        flex-wrap: wrap;
        .phone-item {
          padding:0 0 0.75rem 0;
          flex:0 0 50%;
          &:nth-child(2n) {
            justify-content: center;
          }
          p {
            font-size: 0.8125rem;
            line-height: 0.6875rem;
            color: #123428;
          }
        }
      }
      
    }
  }
} 
  
</style>